<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5">
    <title>Title</title>
    <link rel="stylesheet" href="css/bootstrap.css" />
    <link rel="stylesheet" href="css/common.css" />
    <link rel="stylesheet" href="css/PublicShowStyle.css" />

    <link rel="stylesheet" href="css/index.css" />
    <link rel="stylesheet" href="css/paging.css" />
    <script type="text/javascript" src="js/jquery-3.1.1.js" ></script>
</head>
<body>
    <!--header部分-->
    <div class="head"></div>

    <!--内容部分-->
    <article>
        <div class="container content">
            <div class="custom-content">
                <!--内容顶部-->
                <div id="custom-content-top" class="custom-content-top">

                    <div class="custom-top-item">
                        <div class="img-div">
                            <a href="#">
                                <div class="lucency-view"></div>
                                <img class="img01" src="img/t03.jpg" alt="">
                            </a>
                        </div>

                        <dl class="custom-essay">
                            <dt><a href="#">html5个人博客模板主题《心蓝时间轴...</a></dt>
                            <dd>Html5+css3个人博客模板，主题《心蓝时间轴》，使用css3技术实
                                现网站动画效果，主要模块是时间轴部分.主题颜色为蓝色.目前版本还在测试当...
                            </dd>
                        </dl>

                    </div>

                    <div class="custom-top-item">
                        <div class="img-div">
                            <a href="#">
                                <div class="lucency-view"></div>
                                <img class="img01" src="img/t03.jpg" alt="">
                            </a>
                        </div>
                        <dl class="custom-essay">
                            <dt><a href="#">html5个人博客模板主题《心蓝时间轴...</a></dt>
                            <dd>Html5+css3个人博客模板，主题《心蓝时间轴》，使用css3技术实
                                现网站动画效果，主要模块是时间轴部分.主题颜色为蓝色.目前版本还在测试当...
                            </dd>
                        </dl>
                    </div>
                    <div class="custom-top-item">
                        <div class="img-div">
                            <a href="#">
                                <div class="lucency-view"></div>
                                <img class="img01" src="img/t03.jpg" alt="">
                            </a>
                        </div>
                        <dl class="custom-essay">
                            <dt><a href="#">html5个人博客模板主题《心蓝时间轴...</a></dt>
                            <dd>Html5+css3个人博客模板，主题《心蓝时间轴》，使用css3技术实
                                现网站动画效果，主要模块是时间轴部分.主题颜色为蓝色.目前版本还在测试当...
                            </dd>
                        </dl>
                    </div>
                </div>
                <!--内容顶部End-->

                <!--时间轴式展示-->
                <div class="container custom-timeline" id="article_items">
                    <!--项-->
                    <div class="row custom-timeline-item">
                        <!--时间线-->
                        <div class="col-md-2 col-sm-2 col-xs-2 timeline">
                            <div class="custom-time">
                                <span class="time-circle"></span>
                                <span class="custom-month-day">09-08</span>
                                <span class="custom-year">2017</span>
                            </div>
                        </div>
                        <!--右部内容展示框-->
                        <div class="col-md-8 col-sm-8 col-xs-8 custom-timeline-content">
                            <div class="custom-triangle"></div>
                            <div class="row">
                                <div class="col-md-12 custom-title-right">
                                    <a href="#">三步实现滚动条触动css动画效果</a>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-4 col-sm-4 col-xs-4 custom-img-div">
                                    <img class="img-responsive" src="img/t03.jpg"  alt="">
                                </div>
                                <div class="col-md-8 col-sm-8 col-xs-8">
                                    <span class="custom-content-div">
                                        现在很多网站都有这种效果，我就整理了一下，分享出来。利用滚动条来实现动画效果，
                                    ScrollReveal.js 用于创建和管理元素进入可视区域时的动画效果，
                                    帮助你的网站增加吸引力...
                                    </span>
                                    <div class="row">
                                        <div class="col-md-6 col-sm-6 col-xs-6 custom-label">
                                            原创个人博客模板
                                        </div>
                                        <div class="col-md-4 col-md-offset-2 col-sm-4 col-sm-offset-2 col-xs-4 col-xs-offset-2">
                                            <input class="btn btn-default btn-block custom-btn" type="button" value="阅读全文>>">
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                    <!--项End-->

                    <div class="row custom-timeline-item">
                        <!--时间线-->
                        <div class="col-md-2 col-sm-2 col-xs-2 timeline">
                            <div class="custom-time">
                                <span class="time-circle"></span>
                                <span class="custom-month-day">09-08</span>
                                <span class="custom-year">2017</span>
                            </div>
                        </div>
                        <!--右部内容展示框-->
                        <div class="col-md-8 col-sm-8 col-xs-8 custom-timeline-content">
                            <div class="custom-triangle"></div>
                            <div class="row">
                                <div class="col-md-12 custom-title-right">
                                    <a href="#">三步实现滚动条触动css动画效果</a>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-4 col-sm-4 col-xs-4 custom-img-div">
                                    <img class="img-responsive" src="img/t03.jpg"  alt="">
                                </div>
                                <div class="col-md-8 col-sm-8 col-xs-8">
                                    <span class="custom-content-div">
                                        现在很多网站都有这种效果，我就整理了一下，分享出来。利用滚动条来实现动画效果，
                                    ScrollReveal.js 用于创建和管理元素进入可视区域时的动画效果，
                                    帮助你的网站增加吸引力...
                                    </span>
                                    <div class="row">
                                        <div class="col-md-6 col-sm-6 col-xs-6 custom-label">
                                            原创个人博客模板
                                        </div>
                                        <div class="col-md-4 col-md-offset-2 col-sm-4 col-sm-offset-2 col-xs-4 col-xs-offset-2">
                                            <input class="btn btn-default btn-block custom-btn" type="button" value="阅读全文>>">
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>

                </div>
                <!--时间轴式展示End-->

                <!--分页按钮-->
                <div class="row">
                    <ul class="col-md-3 col-md-offset-5 col-sm-3 col-sm-offset-5 col-xs-3 col-xs-offset-5 custom-paging-btns">
                        <li class="btn custom-paging-btn custom-paging-btn-prev" value="3">3</li>
                        <li class="btn custom-paging-btn custom-paging-btn-choose">1</li>
                        <li class="btn custom-paging-btn custom-paging-btn-next">2</li>
                    </ul>
                </div>
                <!--分页按钮End-->
            </div>
        </div>
    </article>

    <!--底部（页脚）-->
    <div class="custom-footer"></div>

    <script type="text/javascript" src="js/bootstrap.js" ></script>
    <script type="text/javascript" src="js/common.js"></script>
    <script type="text/javascript" src="js/paging.js" ></script>
    <script type="text/javascript" src="js/index.js"></script>

</body>
</html>